<template>
    <div class="save-wrapper ui container" v-if="show">
        <div class="ui very relaxed  grid">
            <div class="sixteen wide column">

                <form action="" class="ui form" @submit.prevent="submit_confirm">
                    <div class="ui header">{{titleType}}绑定</div>


                    <div class="fluid field">
                        <label for="">模型</label>
                        <fselect v-if="pdata" :fname="midinfo.name" @selectValsChange='selectEvent' :data="pdata"
                                 placeholder="请选择模型"></fselect>
                    </div>

                    <div class="fluid field">
                        <label for="">使用场景</label>
                        <fselect :fname="showinfo.name" @selectValsChange='selectEvent' :val="1" :data="typeData"
                                 v-if="typeData"
                                 placeholder="请选择使用场景"></fselect>
                    </div>

                    <myenum :param="{}" v-if="is_not_both&&enumField_hide_type.fval!==undefined"
                            :field="enumField_hide_type" @setVo='setEnum'></myenum>

                    <div class="fluid field">
                        <label for="">字段</label>
                        <mytable :titles="titles" :url="url" ctl="Attr" :val="tableSelected" :checkType="checkType"
                                 :lines="lines"
                                 :fields="fields" name="attr_id" @changePage="changePage" :total="total"
                                 :loading="loading"
                                 @doBindSearch="doBindSearch" @clearSearch="clearSearch" @setVal="setVal"></mytable>
                    </div>

                    <!-- <div class="fluid field">
                      <label for="">绑定模型</label>
                      <fselect :fname="bindModelinfo.name" :data="pdata" placeholder="请选择绑定模型"></fselect>
                    </div> -->

                    <p class="submitRow">
                        <button type="submit" :class="{loading:loadingBtn}" class="ui button">提 交</button>
                    </p>
                </form>


            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import fselect from 'components/form/select'
    import mytable from 'components/form/table'
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    import myenum from 'components/field/enum';
    import {
        mapState,
        mapMutations,
        mapGetters,
        mapActions
    } from 'vuex'

    export default {
        data() {
            return {
                result: '',
                loading: false,
                loadingBtn: false,
                url: '',
                type: 'add',
                model: {},
                midinfo: {
                    title: '父级',
                    name: 'mid'
                },
                enumField_hide_type: {
                    name: 'hide_type',
                    title: '在非使用场景时的展示方式',
                    enum_val: [
                        '遮罩', '隐藏'
                    ]
                },
                showinfo: {
                    title: '使用场景',
                    name: 'showType'
                },
                bindModelinfo: {
                    title: '绑定模型',
                    name: 'bindModel'
                },
                vo: {},
                mid: 0,
                page: 1,
                total: 0,
                pdata: null,
                typeData: null,
                selectVals: {},
                lines: {},
                param: {},
                tabs: [],
                tableSelected: [],
                hasBind: null,

                fields: [
                    'id', 'title', 'name', 'create_time', 'update_time'
                ],
                titles: [
                    '选择', 'ID', '名称', '英文名', '创建时间', '更新时间'
                ],
                result_type: 'rs_error',
                curIndex: '1',
                show: true
            }
        },
        watch: {},
        methods: {
            setEnum(name, val) {
                this.vo[name] = val;
            },
            getType() {
                util.getHardCode(this, 'show_type', (rs) => {
                    this.typeData = rs;
                })
            },
            clearSearch() {
                this.page = 1
                this.getAttr()
            },
            doBindSearch(url, param) {
                this.loading = true

                param.p = 1
                param.length = tool.BIND_ROW_NUM
                this.param = param;
                this.getData(url, param)
            },
            getData(url, param) {
                util.http.SR(this, url, param, null, (rs) => {
                    this.lines = rs.lines
                    this.total = rs.total

                    this.loading = false
                });
            },
            changePage(page) {
                this.page = page
                this.getAttr()
            },
            setVal(tableSelected) {
                this.tableSelected = tableSelected
            },
            selectEvent(val, fname) {
                if (fname == 'mid') {
                    this.mid = val || 0
                    this.clearSearch()
                }
                this.vo[fname] = val

            },
            submit_confirm() {
                util.showConfirm(this, () => {
                    this.onSubmit()
                }, {content: '确认提交吗？'});
            },
            onSubmit() {
                let op = this.$store.state.global.op || 'insert';
                let url = tool.getApi(this, 'Mbind', op);
                logic.edit.setSaveLoading(this);
                //      let tableSelected = this.$store.state.global.tableSelected;
                this.vo.attr_id = JSON.stringify(this.tableSelected);

                util.http.SR(this, url, this.vo, '操作成功', () => {
                    this.loadingBtn = false;
                    let eventVue = util.store.get(this,'eventVue');
                    eventVue.$emit('afterAdd')
                });

            },
            getPdata() {
                let param = {
                    notParse: 1
                }
                util.data.get(this, 'Model', param, (rs) => {
                    this.pdata = rs
                });
            },
            getAttr() {
                this.loading = true

                let url = tool.getApi(this, 'Attr');
                let param = this.param;
                if (this.mid)
                    param.not_bind_mid = this.mid
                param.p = this.page
                param.length = tool.BIND_ROW_NUM

                this.getData(url, param)
            }
        },
        computed: {
            is_not_both() {
                return this.vo.showType != 1;
            },
            titleType() {
                return logic.edit.get_titleType(this);
            },
            checkType() {
                return this.$store.state.global.op == 'update' ? 'radio' : 'checkbox';
            },
            ctl() {
                return this.$route.query.ctl;
            },
            ...mapState(['editVo']),

        },
        components: {
            fselect,
            mytable,
            myenum
        },
        props: ['leftMenu', 'isAdd'],

        destroyed() {

        },
        created() {
            this.enumField_hide_type.fval = 0

            this.url = tool.getApi(this, 'Attr')
            this.getPdata()
            this.getAttr()
            this.getType()
            this.tableSelected = this.vo['attr_id']

        }
    }
</script>
<style rel="stylesheet/less" scoped lang="less">@import "../../common/style/mixin";

@dir: "edit/";
form {
    .submitBtn();
}
</style>
